<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

    <title>我的收藏</title>
</head>

<body class="body-gray">

<div th:replace="m/head :: body('banner.hidden', 'head-to-personal', '我的收藏')"></div>

<div class="headwrap">
    <div class="head-nav order-head-nav">
        <ul>
            <li th:class="${type eq 2 ? 'on' : ''}">
                <a th:href="@{/personal/collect/2/2}">
                    作品
                    <em></em>
                </a>
            </li>
            <li th:class="${type eq 1 and contentType eq 4 ? 'on' : ''}">
                <a th:href="@{'/personal/collect/1/2?contentType=4'}">
                    导演
                    <em></em>
                </a>
            </li>
            <li th:class="${type eq 1 and contentType eq 5 ? 'on' : ''}">
                <a th:href="@{'/personal/collect/1/2?contentType=5'}">
                    编剧
                    <em></em>
                </a>
            </li>
        </ul>
    </div>
</div>


<!--主体内容-->
<div class="myOrder-content">

    <div th:if="${type eq 2 and (videos eq null or videos.size() eq 0)}" style="text-align: center; padding: 20px;">
        收藏列表空白一片, 快去挑选喜欢的作品吧!
        <div class="foot-box"></div>
        <div class="foot-box"></div>
    </div>

    <!--作品收藏-->
    <div class="myOrder-con myCollection-con" th:if="${type eq 2}">
        <div class="myOrder-box" th:each="item:${videos}">
            <div class="middle clearfix">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:src="${#request.getAttribute('uploadServer') + item.spriteUrl}"/>
                    </div>
                    <div class="right">
                        <h4 th:text="${'作品：' + item.name}"></h4>
                        <h5 cus:dict="video-type,${item.type}"></h5>
                        <p th:text="${'简介：' + item.description}"></p>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <a href="javascript:void(0)" class="on cancel" th:attr="data-id=${item.id}" data-type="2" data-operation="2">取消收藏</a>
            </div>
        </div>
    </div>

    <div th:if="${type eq 1 and (users eq null or users.size() eq 0)}" style="text-align: center; padding: 20px;">
        收藏列表空白一片, 快去挑选喜欢的作者吧!
        <div class="foot-box"></div>
        <div class="foot-box"></div>
    </div>

    <!--导演收藏-->
    <div class="myOrder-con myCollection-con" th:if="${type eq 1 and contentType eq 4}">
        <div class="myOrder-box" th:each="item:${users}">
            <div class="middle clearfix">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:src="${#request.getAttribute('uploadServer') + item.portrait}"/>
                    </div>
                    <div class="right">
                        <h4 th:text="${'导演：' + item.nickname}"></h4>
                        <p th:text="${'简介：' + item.description}"></p>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <a href="javascript:void(0)" class="on cancel" th:attr="data-id=${item.id}" data-type="1" data-operation="2">取消收藏</a>
            </div>
        </div>
    </div>

    <!--编剧收藏-->
    <div class="myOrder-con myCollection-con" th:if="${type eq 1 and contentType eq 5}">
        <div class="myOrder-box" th:each="item:${users}">
            <div class="middle clearfix">
                <div class="middle-con clearfix">
                    <div class="left">
                        <img th:src="${#request.getAttribute('uploadServer') + item.portrait}"/>
                    </div>
                    <div class="right">
                        <h4 th:text="${'编剧：' + item.nickname}"></h4>
                        <p th:text="${'简介：' + item.description}"></p>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <a href="javascript:void(0)" class="on cancel" th:attr="data-id=${item.id}" data-type="1" data-operation="2">取消收藏</a>
            </div>
        </div>
    </div>

</div>

<div th:replace="m/foot :: foot"></div>

</body>

<div th:replace="m/foot :: footer('')"></div>


<script>
    $(function () {
        $('.myOrder-con').eq(0).show();

        $('.cancel').click(function () {
            var _self = this;
            var id = $(_self).attr('data-id');
            var type = $(_self).attr('data-type');
            var operation = $(_self).attr('data-operation');

            $.ajax({
                type: 'post',
                url: '/personal/collect/' + type + '/' + operation + '/api/collect',
                data: {
                    dataId: id
                },
                dataType: 'json',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                },
                success: function (result) {
                    if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                        if (result.data == true) {

                        } else {
                            $(_self).parent().parent().remove();
                        }
                    } else {
                        alert(result.error);
                    }
                },
                error: function (e) {
                    alert(Messages.ERROR);
                }
            })
        })
    })
</script>
</html>
